<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽测试</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <slot-test>
        <p>我制定默认slot1</p>
        <p>我制定默认slot2</p>
        <p>我制定默认slot3</p>
        <p slot="none">我未制定slot</p>
        <h2 slot="footer">我指定了footer插槽</h2>
        <h1 slot="header">我制定到了header插槽</h1>
    </slot-test>

    <slot-demo>
        <p>我制定默认slot1</p>
        <p>我制定默认slot2</p>
        <p>我制定默认slot3</p>
        <p slot="none">我未制定slot</p>
        <h2 slot="footer">我指定了footer插槽</h2>
        <h1 slot="header">我制定到了header插槽</h1>
    </slot-demo>
    <todo-slot v-for="(item, index) in demoArr" v-bind:index="index" v-bind:arr="item"></todo-slot>
</div>
<script>

    let SlotTest = {
        template: `
            <div>
                <slot name="header"></slot>
                <slot></slot>
                <slot name="footer"></slot>
            </div>
        `
    };

    /**
     * 说明:
     *      1. 这种注册方式是局部的, 必须现在vue实例的components属性中声明才可以使用
     */
    let SlotDemo = {
        template: `
            <div>
                <slot name="header"></slot>
                <slot></slot>
                <slot name="footer"></slot>
            </div>
        `
    };

    /**
     * 说明:
     *      1. 这种注册方式是全局的, 可以直接使用
     */
    Vue.component('todo-slot', {
        //声明模板标签的属性节点
        props: {
            index: {
                type: Number,
                default() {
                    return 0;
                }
            },
            arr: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        //展示属性节点为真实的html元素
        template: `
            <div>
                <p>第{{index}}条</p>
                <div>
                    <ul>
                        <li v-for="(item, index1) in arr">{{index1}}-> {{item}}</li>
                    </ul>
                </div>
            </div>
        `
    });

    let app = new Vue({
        el: '#app',
        components: {SlotTest, SlotDemo},
        data() {
            return {
                demoArr: [
                    ['s1', 's2', 's3'],
                    ['s11', 's22', 's33'],
                    ['s111', 's222', 's333']
                ]
            }
        }
    });

</script>
</body>
</html>